import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Products = React.lazy(() => import('./Products'));

function App() {
  return (
    
      Loading...

В този пример компонентите Home, About и Products се зареждат лениво (lazily). Компонентът Suspense предоставя резервен потребителски интерфейс (в този случай „Loading...“) докато компонентите се зареждат.

Примерен сценарий: Представете си глобална социална мрежа. Когато потребител влезе за първи път, той бива пренасочен към своя новинарски поток (Home). Кодът за функции като потребителски профили (About) или пазар (Products) се зарежда само когато потребителят навигира до тези секции, което подобрява първоначалното време за зареждане.

Angular

Angular поддържа лениво зареждане на модули чрез своята конфигурация на рутера. Можете да използвате свойството loadChildren, за да посочите модул, който трябва да бъде зареден при поискване.

            
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },
  { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

            

              
                Copy
              
            
          

В този пример HomeModule, AboutModule и ProductsModule се зареждат лениво, когато потребителят навигира до съответните им маршрути.

Примерен сценарий: Помислете за вътрешния уеб портал на мултинационална корпорация. Различните отдели (напр. Човешки ресурси, Финанси, Маркетинг) имат свои собствени модули. Разделянето на код гарантира, че служителите изтеглят само кода за отделите, с които взаимодействат, като по този начин се оптимизира процесът на зареждане.

Vue.js

Vue.js поддържа лениво зареждане на компоненти чрез динамични импорти във вашата конфигурация на рутера.

            
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/products',
    name: 'Products',
    component: () => import(/* webpackChunkName: "products" */ '../views/Products.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

            

              
                Copy
              
            
          

Тук компонентите Home.vue, About.vue и Products.vue се зареждат лениво, когато се посетят съответните им маршрути. Коментарът webpackChunkName помага на Webpack да създаде отделни части (chunks) за всеки компонент.

Примерен сценарий: Представете си глобална онлайн образователна платформа. Модулите на курсовете (напр. Математика, История, Наука) могат да се зареждат при поискване, когато студентите се запишат в тях. Този подход минимизира първоначалния размер на изтегляния файл и оптимизира потребителското изживяване.

Предимства на маршрутно-базираното разделяне на код

• Лесна имплементация: Сравнително лесно за настройка и разбиране.
• Ясно разделение на отговорностите: Съответства добре на структурата на много уеб приложения.
• Подобрено първоначално време за зареждане: Значително намаляване на количеството код, зареден предварително.

Недостатъци на маршрутно-базираното разделяне на код

• Потенциал за дублиране: Споделени компоненти или зависимости могат да бъдат включени в няколко части на маршрути, което води до дублиране на код.
• Ограничения в грануларността: Може да не е идеално за приложения със сложни компоненти, споделени между няколко маршрута.

Компонентно-базирано разделяне на код

Компонентно-базираното разделяне на код включва разделяне на кода на вашето приложение въз основа на отделни компоненти, а не на цели маршрути. Това позволява по-детайлен подход към зареждането на код, като се зарежда само кодът, необходим за конкретни компоненти, когато те са нужни.

Имплементация

Компонентно-базираното разделяне на код е по-сложно от маршрутно-базираното, но предлага по-голяма гъвкавост и потенциал за оптимизация. Отново, имплементацията варира в зависимост от рамката.

React

В React можете да използвате React.lazy и Suspense за лениво зареждане на отделни компоненти в рамките на маршрут или друг компонент.

            
import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function MyPage() {
  return (
    

      
Welcome to My Page
      Loading Component...
}>